import { _decorator, Component, Label, Layout, Node } from 'cc';

const { ccclass, property } = _decorator;

@ccclass('GroupData')
export class GroupData {
    @property(Node)
    arrow: Node = null!;

    @property(Node)
    content: Node = null!;

    public isFold: boolean = false;

    // 设置折叠
    public setFold(isFold: boolean) {
        this.isFold = isFold;
        this.arrow.angle = this.isFold ? 90 : 0;
        this.content.active = !this.isFold;
    }

    public changeFold() {
        this.setFold(!this.isFold);
    }

    addContent(ui: Node) {
        this.content.addChild(ui);
        const layout = this.content.getComponent(Layout);
        layout?.updateLayout();
    }
}

@ccclass('GUIGroup')
export class GUIGroup extends Component {
    @property(Label)
    label: Label = null!;

    @property(GroupData)
    groupData: GroupData = new GroupData();

    @property
    defaultFold = false;

    protected onLoad(): void {
        this.groupData.setFold(this.defaultFold);
    }

    onClickArrow() {
        this.groupData.changeFold();
    }

    init(name: string) {
        this.label.string = name;
    }

    addContent(ui: Node) {
        this.groupData.addContent(ui);
    }
}
